<template>
  <div class="address">
    <!-- <h3><span @click="returnAdd">&lt;</span> 新增收货地址</h3> -->
    <NavBar title="新增收货地址" left-arrow @click-left="returnAdd()" />
    <AddressEdit
      :area-list="areaList"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      save-button-text="确认"
      area-placeholder="请选择所在区域"
      name="请输入姓名"
      tel="请输入联系方式"
      address-info="{}"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { NavBar } from "vant";
import { AddressEdit } from "vant";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
// import bus from '../bus'
import { addressAddApi } from "../utils/api";
export default {
  data() {
    return {
      //地区选择areaList    上部【 :area-list="areaList"】
      areaList,
      searchResult: [],
      token: "",
    };
  },
  mounted() {
    this.token = localStorage.getItem("token");
  },
  methods: {
    onSave(content) {
      // console.log(content);
      // console.log(content.name);
      // console.log(content.tel);
      // console.log(content.areaCode);
      // console.log(
      //   `${content.province}${content.city}${content.county}${content.addressDetail}`
      // );
      // console.log(content.isDefault);
      // console.log(this.token);
      addressAddApi({
        token: this.token,
        name: content.name,
        phone: content.tel,
        address: `${content.province}${content.city}${content.county}${content.addressDetail}`,
        status: content.isDefault,
      }).then((res) => {
        console.log(res);
      });
      this.$router.push('/userAddress');
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    returnAdd() {
      this.$router.push("/userAddress");
    },
  },
  components: {
    NavBar,
    AddressEdit,
  },
};
</script>

<style scoped>
/* h3 {
  position: relative;
}
h3 span {
  position: absolute;
  left: 5%;
  font-size: 30px;
} */
/* 标题 */
.address /deep/ .van-ellipsis {
  font-size: 18px;
  font-weight: 700;
}
/* 返回箭头 */

.address /deep/ .van-icon-arrow-left {
  color: black;
  font-size: 24px;
  font-weight: 700;
}
.address /deep/ .van-field__label {
  width: 0;
}

.address /deep/ .van-cell__title {
  text-align: left;
}
.address /deep/ .van-cell__title span {
  left: 0;
}
.address /deep/ .van-field__label span {
  position: absolute;
  left: -200px;
}
.address /deep/ .van-address-edit__buttons {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0;
  margin: 0;
  left: 0;
  border-radius: 0;
}
.address /deep/ .van-button {
  margin: 0;
  border-radius: 0;
}
.address /deep/ .van-address-edit {
  padding: 0;
}
</style>
